<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title></title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'>
        <!-- attribute默认被组件的根元素“继承” -->
        <!-- <date-picker1 name="partydate" roomid="18" :age="age"></date-picker> -->

        <h3>date-picker2</h3>
        <date-picker2 @change="submitChange"></date-picker>
        <hr>
    </div>


    <script>
        const app = Vue.createApp({
            data(){
                return {
                    age:18
                }
            },
            methods:{
                submitChange(){
                    console.log("submitChange");
                }
            },
            computed:{}
        })

        app.component("date-picker1",{
            // template:`
            // <div>
            //     <input type="datetime-local">
            // </div>
            // `

            // 如果不想根元素得到全部组件上的attribut 首先要声明弃用属性继承
            inheritAttrs:false,
            template:`
            <div>
                <!--指定具体子元素去获取定义在组件级别的attribute-->
                <input type="datetime-local" v-bind="$attrs"><br>

                <!--指定具体子元素去接受具体的attribute-->
                <input type="datetime-local" v-bind:name="$attrs.name"><br>
                <input type="datetime-local" :roomid="$attrs.roomid"><br>
            </div>
            `,

            /* 在组件实例被创建时获取到全部attribute */
            props:["age"],
            created(){
                /* 写在组件左半边种的所有key=value默认以attribute/$attrs去接收 但如果声明为props则被$props接收 */
                console.log("date-picker1 created:this.$attrs=",this.$attrs);
                console.log("date-picker1 created:this.$props=",this.$props);
            }

        })

        app.component("date-picker2",{
            // template:`
            // <select>
            //     <option value="1">yesterday</option>
            //     <option value="2">today</option>
            //     <option value="3">tomorrow</option>
            // </select>
            // `,

            // 没有根布局 则无人继承自定义事件
            // 哪个子元素想要自定义事件 则显式地通过$attrs.xxx去获取
            template:`
            <select>
                <option value="1">yesterday</option>
                <option value="2">today</option>
                <option value="3">tomorrow</option>
            </select>
            <input type="text" @change="$attrs.onChange">
            `,

            created(){
                /* 写在组件左半边种的所有key=value默认以attribute/$attrs去接收 但如果声明为props则被$props接收 */
                console.log("date-picker2 created:this.$attrs=",this.$attrs);
                console.log("date-picker2 created:this.$props=",this.$props);
            }
        })

        app.mount('#app')
    </script>
</body>
</html>